<template>
  <div class="article">
    <article-header/>
    <article-content 
    :articleId="articleId" 
    @clickReplay="getComment"
    />
    <!-- 弹出层 -->
    <van-popup 
    v-model="isShow"
    :style="{ height: '100%' }"
    position="bottom">
      <reply-comment :commentInfo="commentInfo" @closePop="isShow=false" v-if="isShow"/>
    </van-popup>
  </div>
</template>

<script>
import ArticleHeader from './components/ArticleHeader.vue';
import ArticleContent from './components/ArticleContent.vue';
import ReplyComment from './components/ReplyComment.vue'
// import ArticleFooter from './components/ArticleFooter.vue';
export default {
name: 'Article',
props: {
    articleId: {
      type: [Number,String],
      required: true
    }
  },
  data(){
    return {
      isShow: false,
      commentInfo: {},
    }
  },
components: {
  ArticleHeader,
  ArticleContent,
  ReplyComment
  // ArticleFooter
},
methods: {
  getComment(obj){
    this.isShow = true
    this.commentInfo = obj
  },

},
provide() {
    // 使用函数的形式，可以访问到 `this`
    return {
      articleId: this.articleId
    }
  }
}
</script>

<style>

</style>